<template>
  <div>
    <a-form-item field="major" :label="t['模式']">
      <a-radio-group v-model="form.major">
        <a-radio v-for="(item, key) in majorList" :key="key" :value="item.value">
          {{ t[item.label] }}
        </a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item v-if="form.major === ENUM_MAJOR.MAIN" :label="t['关联模板']">
      <a-card class="w-full">
        <div class="flex gap-2 flex-col">
          <div
            v-for="(item, key) in defaultTemplateOptions"
            :key="key"
            class="flex gap-2 justify-between w-full"
          >
            <div style="width: 120px">
              {{ t[item.label] }}
            </div>

            <a-select
              v-model="form.templateList![key].template"
              :placeholder="t['选择模板']"
              style="width: 160px"
              :options="refTemplateOptions"
              allow-clear
            >
            </a-select>
          </div>
        </div>
      </a-card>
    </a-form-item>
  </div>
</template>

<script setup lang="ts">
import { listThemeComponents } from "@/api/service/theme-coms/theme.coms";
import { ENUM_DATA_SCOPE, ENUM_MAJOR } from "@/enum/system.enum";

import { defaultTemplateOptions } from "@/data/options/options";
import { majorList } from "../../template/form";
import { form } from "../data/form";

const t = translate("公共模块");
const refTemplateOptions = ref();

const getThemeList = async () => {
  const { rows } = await listThemeComponents({
    pageNum: 1,
    pageSize: 10000,
    major: "1",
    scope: ENUM_DATA_SCOPE.THIS_SHOP
  });
  refTemplateOptions.value = rows.map((e) => {
    return {
      value: e.templateId,
      label: e.templateName
    };
  });
};

onMounted(() => {
  getThemeList();
});
</script>

<style lang="scss" scoped></style>
